{% extends "jobs/base.html" %}

{% block title %}Jobs · FirstByte{% endblock %}

{% block content %}
<h1>Available Jobs</h1>

{% if jobs %}
    {% for job in jobs %}
        <div style="border: 1px solid #eee; border-radius: 8px; padding: 18px; margin-bottom: 16px;">
            <h2 style="margin: 0 0 6px;">
    <a href="{% url 'job_detail' job.id %}" style="color:#243E64; text-decoration:none;">{{ job.title }}</a>
<span style="display:inline-block; font-size:12px; font-weight:600; padding:2px 10px; border-radius:12px; margin-bottom:6px;
    {% if job.level == 'ENTRY' %}background:#e3f2e5; color:#2e7d32;
    {% elif job.level == 'INTERMEDIATE' %}background:#fff3e0; color:#c47d00;
    {% else %}background:#fdeaea; color:#c62828;{% endif %}">
    {{ job.get_level_display }} level
</span>
</h2>
            <p style="color: #555; margin: 0 0 10px;">
                {% if job.category %}{{ job.category.name }}{% endif %}
                {% if job.budget %} &middot; {{ job.budget }}{% endif %}
                {% if job.deadline %} &middot; Deadline: {{ job.deadline|date:"j M Y" }}{% endif %}
            </p>
            <p style="margin: 0;">{{ job.description|truncatewords:30 }}</p>
        </div>
    {% endfor %}
{% else %}
    <p>No jobs available right now. Check back soon.</p>
{% endif %}
{% endblock %}